<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
    <title>hello kitty  index2</title>
    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <!--<link href="lib/bootstrap/css/agency.css" rel="stylesheet">-->
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/animations.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" href="css/home.css"/>
</head>

<body  id="myScrollspy">
<!--导航begin-->
<div class="kitty-navbar">
    <nav class=" navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">sweetBug</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right" id="menu">
                    <li data-menuanchor="page1" class="active"><a href="#page1">个人信息</a></li>
                    <li data-menuanchor="page2"><a href="#page2">技能介绍</a></li>
                    <li data-menuanchor="page3"><a href="#page3">特效</a></li>
                    <!--<li data-menuanchor="page4"><a href="#page4">项目经验</a></li>-->
                    <li data-menuanchor="page5"><a href="#page5">自我介绍</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>
</div>
<!--导航end-->

<div class="wrap" id="fullpage">

    <!--第一屏  个人信息begin-->
    <div class=" section page page1 current">
        <div class="container">
            <div class="row">
                <div class="page1-infor col-xs-12 ">
                </div>
            </div>
        </div>
    </div>
    <!--第一屏end-->

    <!--第二屏  技能介绍begin-->
    <div class="section page page2" >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-xs-12 page2-skill-l">
                    <div class="skill-top shake">
                    </div>
                    <div class="skill-bottom visible-lg visible-md hidden-sm hidden-xs">
                        <p>1.精通html/css,能精准还原设计图效果，熟悉 W3C标准，对标签语义化，代码重用性、代码模块化有深入了解，并拥有丰富的页面布局经验。</p>
                        <p>2.精通原生JavaScript，熟练各种BOM，DOM操作。对原型，闭包，jQuery的封装原理亦有了解。</p>
                        <p>3.熟悉jQuery，zepto实现多终端页面制作，熟练使用bootstrap进行响应式页面的开发。</p>
                        <p>4.熟悉 Ajax 、jsonp 和arttemplate配合 完成前后端数据交互，并完成页面渲染工作</p>
                        <p>5.解 angular,理解MVC,MVVM思想。</p>
                        <p>6.了解网站优化方案，有提升用户体验的意识。</p>
                    </div>
                </div>
                <div class="col-md-6 col-xs-12 page2-skill-r">
                    <div class=" holder visible-lg visible-md hidden-sm hidden-xs"></div>
                    <div class="candybar">
                        <div class="candybar1"></div>
                        <div class="candybar2"></div>
                        <div class="candybar3"></div>
                        <div class="candybar4"></div>
                        <div class="candybar5"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--第二屏end-->

    <!--第三屏  特效begin-->
    <div class="section page page3" >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-xs-12 ">
                    <div class="page3-l" id="slider-box">
                        <div></div>
                        <div class="slider" id="slider">

                            <ul>
                                <li><img src="images/page3-slider1.png" ></li>
                                <li><img src="images/page3-slider2.png" ></li>
                                <li><img src="images/page3-slider3.png" ></li>
                                <li><img src="images/page3-slider4.png" ></li>
                                <li><img src="images/page3-slider5.png" ></li>
                            </ul>
                            <div id="arr" class="arr"><span id="left" class="left"><img src="images/arr_l.png" alt=""></span><span id="right" class="right"><img src="images/arr_r.png" alt=""></span></div>
                            <ol >
                                <li class="active"><a href="#"></a></li>
                                <li><a href="#"></a></li>
                                <li><a href="#"></a></li>
                                <li><a href="#"></a></li>
                                <li><a href="#"></a></li>
                            </ol>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 visible-lg visible-md hidden-sm hidden-xs page3-r">
                    <div class="page3-r"></div>
                </div>
            </div>
        </div>
    </div>
    <!--第三屏end-->

    <!--第四屏  项目介绍-->
    <!--<div class="section page page4" id="page4"></div>-->
    <!--第四屏end-->

    <!--第五屏begin  自我介绍-->
    <div class="section page page5">
        <div class="container">
            <div class="row">
                <div class="page5-top col-lg-12">
                    <div class="page5-top-con">
                        自我评价
                    </div>
                </div>
                <div class="page5-bottom col-lg-12">
                    <div class="page5-bottom-con">
                        <p>良好的沟通能力和团队合作能力，能够与各部门愉快合作。</p>
                        <p>良好的学习能力，对新技术有一定的热忱，会主动学习新的知识和技术。</p>
                        <p>乐观积极，坚忍不拔，抗压能力强。</p>
                        <p>耐心细致，力求精致，在力所能及的的范围内力求做到精致漂亮。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--第五屏end-->



</div>
<!--底部  个人信息  begin-->


<div class="kitty-footer">
    <nav class=" navbar navbar-inverse navbar-fixed-bottom" role="navigation">
        <div class="container">
            <div class="row visible-lg visible-md hidden-sm hidden-xs " >
                <div class="personinfor col-md-4">电话 ： 18501624738</div>
                <div class="personinfor col-md-4">QQ : 2546001896</div>
                <div class="personinfor col-md-4">email：chuzhongli163@163.com</div>
            </div>
            <ul class="hidden-lg hidden-md visible-sm visible-xs phont-footer">
                <li>电话 ： 18501624738</li>
                <li>QQ : 2546001896</li>
                <li>email：chuzhongli163@163.com</li>
            </ul>
        </div>
    </nav>
</div>

<!--底部  个人信息 end-->

<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/jquery.fullpage.min.js"></script>
<script src="js/index.js"></script>
<script>
    $(function(){
        $('#fullpage').fullpage({        // 设置背景色
            //        sectionsColor : ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
            anchors: ['page1', 'page2','page3','page5' ],
            menu: '#menu',
            afterLoad: function (anchorLink, index) {
                $('.section').removeClass('current');
                // 延时100毫秒执行
                setTimeout(function () {
                    $('.section').eq(index - 1).addClass('current');
                }, 100);
            }
        });
    })

</script>
</body>
</html>